<template>
	<div class="render_form">
		<div class="th-bd left_box">
			<el-form label-width="105px">
				<draggable :list="reder_list" :clone="cloneData" :options="dragOptions1">
					<transition-group class="form-list-group left_list" type="transition" name="flip-list" tag="div">
						<div v-for="item in reder_list" :key="item.ele" class="left_children" style="position: relative">
							<i :class="item.obj.icon" class="left-icon" />
							<Render :ele="item.ele" :obj="item.obj" />
						</div>
					</transition-group>
				</draggable>
			</el-form>
		</div>
		<div class="th-bd center_box">
			<el-form label-width="100px" style="height: 100%">
				<draggable :list="dynamicValidateForm.sortable_item" :options="dragOptions2" style="height: 100%">
					<transition-group style="height: 100%; overflow: auto" class="form-list-group center_list" type="transition" name="flip-list" tag="div">
						<Render
							v-for="(item, index) in dynamicValidateForm.sortable_item"
							:key="index + 1"
							:style="{ width: renderItemWidth(item.obj.elementWidth) }"
							:class="{ active: selectedEl.sortNum === item.sortNum }"
							:ele="item.ele"
							:obj="item.obj"
							@click.native="selectForm(index)"
						/>
					</transition-group>
				</draggable>
			</el-form>
		</div>
		<FormConfig :selected-el="selectedEl" class="th-bd right_box" />

		<el-dialog title="预览" :visible.sync="showForm">
			<el-form ref="dynamicValidateForm" :model="dynamicValidateForm" label-width="100px" class="render-form">
				<Render
					v-for="(item, index) in dynamicValidateForm.sortable_item"
					:key="index + 1"
					:style="{ width: item.obj.elementWidth }"
					:index="index"
					:ele="item.ele"
					:obj="item.obj"
				/>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="showForm = false">取 消</el-button>
				<el-button type="primary" @click="sure">确 定</el-button>
			</span>
		</el-dialog>

		<el-button-group class="btn-group">
			<el-button class="el-icon-circle-check" type="primary" @click="getFormList">获取</el-button>
			<el-button class="el-icon-circle-check" type="primary" @click="showForm = true">预览</el-button>
		</el-button-group>
	</div>
</template>

<script>
import reder_list from "./rederList";
import draggable from "vuedraggable";
export default {
	components: {
		FormConfig: () => import(/* webpackChunkName: 'fromConfig' */ "./component/fromConfig"),
		Render: () => import(/* webpackChunkName: 'render' */ "./render.js"),
		draggable,
	},
	data() {
		return {
			reder_list,
			selectedEl: {}, // 选中元素
			showForm: false,
			dynamicValidateForm: {
				sortable_item: [],
			},
		};
	},
	computed: {
		// 拖拽表单1
		dragOptions1() {
			return {
				animation: 0,
				ghostClass: "ghost",
				// 分组
				group: {
					name: "shared",
					pull: "clone",
					// revertClone: false,
				},
				// 禁止拖动排序
				sort: false,
			};
		},
		// 拖拽表单2
		dragOptions2() {
			return {
				animation: 0,
				ghostClass: "ghost",
				group: {
					// 只允许放置shared的控件,禁止pull
					put: ["shared"],
				},
			};
		},
		renderItemWidth() {
			return function (width) {
				return width === "100%" ? "calc(100% - 10px)" : "calc(50% - 10px)";
			};
		},
	},
	methods: {
		sure() {
			this.$refs.dynamicValidateForm.validate(valid => {
				if (valid) {
					this.$store.dispatch("render/setRenderForm", this.dynamicValidateForm);
				}
			});
		},
		getFormList() {
			console.log(this.dynamicValidateForm);
		},
		selectForm(index) {
			this.selectedEl = this.dynamicValidateForm.sortable_item[index];
		},
		cloneData(data) {
			data.sortNum = this.dynamicValidateForm.sortable_item.length;
			return JSON.parse(JSON.stringify(data));
		},
	},
};
</script>

<style lang="scss">
.render_form {
	height: 100%;
	position: relative;
	display: flex;
	.btn-group {
		position: absolute;
		left: 0;
		bottom: 0;
	}
}

.left_box {
	flex: 0 1 350px;
	min-width: 240px;
	.left_list {
		user-select: none;
		display: flex;
		flex-wrap: wrap;
		.left_children {
			margin: 5px;
			.el-form-item {
				margin-bottom: 0px;
				.el-form-item__label {
					border: 1px solid #f4f6fc;
					border-style: dashed;
					text-indent: 26px;
					padding: 0;
					text-align: left;
					background: #f4f6fc;
					cursor: move;
					&:hover {
						border: 1px dashed rgba($color: teal, $alpha: 0.3);
					}
				}
				.el-form-item__content {
					display: none;
				}
			}
		}

		.left-icon {
			font-size: 16px;
			position: absolute;
			z-index: 1;
			top: 9px;
			left: 10px;
			color: #0e3d9c;
		}
	}
}
.center_box {
	flex: 1;
	margin: 0 10px;
	min-width: 600px;
	.center_list {
		white-space: pre-wrap;
		padding: 10px;
		.el-form-item {
			vertical-align: top;
			display: inline-block;
			border: 1px dashed #ccc;
			border-left: 3px solid orange;
			padding: 10px;
			transition: all 0.3s;
			margin: 5px;
			&:hover {
				border-left-color: deeppink;
				background: rgba($color: teal, $alpha: 0.3);
				.el-form-item__label {
					color: #fff;
				}
			}
			&.active {
				border-left-color: red;
				background: rgba($color: teal, $alpha: 0.2);
				.el-form-item__label {
					color: #fff;
				}
			}
		}
		.left-icon {
			display: none;
		}
	}
}
.right_box {
	flex: 0 1 400px;
	padding: 20px;
	overflow: auto;
	.el-input-number__decrease {
		top: 2px;
	}
	.removeIcon {
		font-size: 20px;
	}
}

.render-form {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.el-rate {
	line-height: 40px;
}
.ghost {
	opacity: 1;
	background: #c8ebfb;
}

// 富文本
.quillWrapper {
	background: #fff;
	line-height: 0;
	.ql-picker-item {
		line-height: 20px;
	}
}
</style>
